<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="frag">
    <div class="item ">
        <div class="item-wrap">
            <div class="item-detail">
                <div class="item-content">
                    <!-- rating  -->
                    <div class="reviews-content">
                        <div class="star">
                            <span th:style="'width:'+${detail.star}+'px'"></span>
                        </div>
                        <div class="item-number-rating">[[${detail.reviews}]] Review(s)</div>
                    </div>
                    <!-- end rating  -->
                    <!--名字-->
                    <h4>
                        <a th:href="@{/simpleproduct/}+${detail.pid}" th:title="${detail.pname}"
                           th:text="${detail.pname}"></a>
                    </h4>

                    <!-- 价格 -->
                    <div class="item-price">

                        <del th:if="${detail.deals!=0}" th:text="'￥'+${detail.marketPrice}">
                        </del>

                        <ins th:text="'￥'+${detail.shopPrice}">
                        </ins>
                    </div>

                    <div class="sale-off" th:if="${detail.deals !=0}">
                        -[[${#numbers.formatDecimal(detail.deals*100/detail.marketPrice,1,1)}]]%
                    </div>

                </div>

                <div class="item-img products-thumb">
                    <a th:href="@{/simpleproduct/}+${detail.pid}">
                        <div class="product-thumb-hover">
                            <img width="300" height="300" th:src="@{${detail.pimage}}"
                                 class="attachment-shop_catalog size-shop_catalog wp-post-image" alt=""
                            />
                        </div>
                    </a>

                    <!--添加到心愿单，购物车, compare -->
                    <div class="item-bottom">
                        <a rel="nofollow" data-th-attr="onclick='addToCart(\''+${detail.pid}+'\')'"
                           class="button product_type_simple add_to_cart_button ajax_add_to_cart" title="Add to Cart">Add
                            to cart</a>

                        <a href="javascript:void(0)" class="compare button" rel="nofollow" title="Add to Compare">Compare</a>

                        <div class="yith-wcwl-add-to-wishlist ">
                            <div class="yith-wcwl-add-button show" style="display:block">
                                <a data-th-attr="onclick='addToWish(\''+${detail.pid}+'\')'" rel="nofollow"
                                   class="add_to_wishlist">Add to Wishlist</a>
                                <img th:src="@{images/wpspin_light.gif}" class="ajax-loading" alt="loading" width="16"
                                     height="16" style="visibility:hidden"/>
                            </div>

                            <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">
                                <span class="feedback">Product added!</span>
                                <a href="#" rel="nofollow">Browse Wishlist</a>
                            </div>

                            <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
                                <span class="feedback">The product is already in the wishlist!</span>
                                <a href="#" rel="nofollow">Browse Wishlist</a>
                            </div>

                            <div style="clear:both"></div>
                            <div class="yith-wcwl-wishlistaddresponse"></div>
                        </div>

                        <div class="clear"></div>
                        <a href="" data-fancybox-type="ajax" class="sm_quickview_handler-list fancybox fancybox.ajax">Quick
                            View </a>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<div id="hot">
    <div class="item">
        <div class="item-inner">
            <div class="item-img">
                <a th:href="@{/simpleproduct/}+${hotp.pid}" title="${hotp.pname}">
                    <img width="180" height="180" th:src="${hotp.pimage}"
                         class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt=""
                         sizes="(max-width: 180px) 100vw, 180px"/>
                </a>
            </div>

            <div class="item-sl pull-left">

                <span th:text="${hotStat.count}"></span>
            </div>

            <div class="item-content">
                <!-- rating  -->
                <div class="reviews-content">
                    <div class="star">
                        <span th:style="'width:'+${hotp.star}+'px'"></span>
                    </div>
                    <div class="item-number-rating">[[${hotp.reviews}]] Review(s)</div>
                </div>
                <!-- end rating  -->

                <h4>
                    <a th:href="@{/simpleproduct/}+${hotp.pid}" th:title="${hotp.pname}"><span
                            th:text="${hotp.pname}"></span> </a>
                </h4>

                <div class="item-price">
                    <del th:if="${hotp.deals!=0}" th:text="'￥'+${hotp.marketPrice}">
                    </del>

                    <ins th:text="'￥'+${hotp.shopPrice}">
                    </ins>
                </div>
            </div>
        </div>
    </div>

</div>

<div id="dea">

    <div class="item-wrap">
        <div class="item-detail">
            <div class="item-content">
                <!-- rating  -->
                <div class="reviews-content">
                    <div class="star">
                        <span th:style="'width:'+${deal.star}+'px'"></span>
                    </div>

                    <div class="item-number-rating">[[${deal.reviews}]] Review(s)</div>
                </div>
                <!-- end rating  -->

                <h4>
                    <a th:href="@{/simpleproduct/}+${deal.pid}" th:title="${deal.pname}"><span
                            th:text="${deal.pname}"></span></a>
                </h4>

                <!-- Price -->
                <div class="item-price">
                    <del th:if="${deal.deals!=0}" th:text="'￥'+${deal.marketPrice}">
                    </del>

                    <ins th:text="'￥'+${deal.shopPrice}">
                    </ins>
                </div>

                <div class="sale-off">-[[${#numbers.formatDecimal(deal.deals*100/deal.marketPrice,1,1)}]]%</div>

                <div class="product-countdown" data-date="3519776000" data-price="$250" data-starttime="1483747200"
                     data-cdtime="3519776000"></div>
            </div>

            <div class="item-image-countdown">
                <span class="onsale">Sale!</span>

                <a th:href="@{/simpleproduct/}+${deal.pid}">
                    <div class="product-thumb-hover">
                        <img width="300" height="300" th:src="@{${deal.pimage}}"
                             class="attachment-shop_catalog size-shop_catalog wp-post-image" alt=""
                             sizes="(max-width: 300px) 100vw, 300px"/>
                    </div>
                </a>

                <!-- add to cart, wishlist, compare   -->
                <div class="item-bottom">
                    <a rel="nofollow" data-th-attr="onclick='addToCart(\''+${deal.pid}+'\')'"
                       class="button product_type_simple add_to_cart_button ajax_add_to_cart" title="Add to Cart">Add to
                        cart</a>

                    <a href="javascript:void(0)" class="compare button" rel="nofollow"
                       title="Add to Compare">Compare</a>

                    <div class="yith-wcwl-add-to-wishlist ">
                        <div class="yith-wcwl-add-button show" style="display:block">
                            <a rel="nofollow" data-th-attr="onclick='addToWish(\''+${deal.pid}+'\')'"
                               class="add_to_wishlist">Add to Wishlist</a>
                            <img th:src="@{images/wpspin_light.gif}" class="ajax-loading" alt="loading" width="16"
                                 height="16" style="visibility:hidden"/>
                        </div>

                        <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">
                            <span class="feedback">Product added!</span>
                            <a href="#" rel="nofollow">Browse Wishlist</a>
                        </div>

                        <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
                            <span class="feedback">The product is already in the wishlist!</span>
                            <a href="#" rel="nofollow">Browse Wishlist</a>
                        </div>

                        <div style="clear:both"></div>
                        <div class="yith-wcwl-wishlistaddresponse"></div>
                    </div>

                    <div class="clear"></div>
                    <a href="" data-fancybox-type="ajax" class="sm_quickview_handler-list fancybox fancybox.ajax">Quick
                        View </a>
                </div>
            </div>
        </div>
    </div>


</div>

<div class="products-entry item-wrap clearfix" id="shopping">
    <div class="item-detail">
        <!--简略信息-->
        <div class="item-img products-thumb">
            <span class="onsale">Sale!</span>
            <a th:href="@{/simpleproduct/}+${shop.pid}">
                <div class="product-thumb-hover">
                    <img width="300" height="300" th:src="@{${shop.pimage}}"
                         class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="">
                </div>
            </a>

            <!-- add to cart, wishlist, compare -->
            <div class="item-bottom clearfix">
                <a rel="nofollow" data-th-attr="onclick='addToCart(\''+${shop.pid}+'\')'"
                   class="button product_type_simple add_to_cart_button ajax_add_to_cart" th:text="#{addtocart}">Add to
                    cart</a>

                <a href="javascript:void(0)" class="compare button" rel="nofollow" title="Add to Compare">Compare</a>

                <div class="yith-wcwl-add-to-wishlist add-to-wishlist-248">
                    <div class="yith-wcwl-add-button show" style="display:block">
                        <a data-th-attr="onclick='addToWish(\''+${shop.pid}+'\')'" href="#" rel="nofollow"
                           class="add_to_wishlist">Add to Wishlist</a>
                        <img th:src="@{images/wpspin_light.gif}" class="ajax-loading" alt="loading" width="16"
                             height="16" style="visibility:hidden"/>
                    </div>

                    <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">
                        <span class="feedback">Product added!</span>
                        <a href="#" rel="nofollow">Browse Wishlist</a>
                    </div>

                    <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
                        <span class="feedback">The product is already in the wishlist!</span>
                        <a href="#" rel="nofollow">Browse Wishlist</a>
                    </div>

                    <div style="clear:both"></div>
                    <div class="yith-wcwl-wishlistaddresponse"></div>
                </div>

                <div class="clear"></div>
                <a href="#" data-fancybox-type="ajax" class="sm_quickview_handler-list fancybox fancybox.ajax">Quick
                    View </a>
            </div>
        </div>
        <!--详细信息-->
        <div class="item-content products-content">
            <div class="reviews-content">
                <div class="star"><span th:style="'width:'+${shop.star}+'px'"></span></div>
            </div>

            <h4><a th:href="@{/simpleproduct/}+${shop.pid}" th:title="${shop.pname}"><span
                    th:text="${shop.pname}"></span> </a></h4>

            <span class="item-price">

                        <del th:if="${shop.deals!=0}" th:text="'￥'+${shop.marketPrice}">
                        </del>

                        <ins th:text="'￥'+${shop.shopPrice}">
                        </ins>
                    </span>

            <div class="item-description">
                <p th:text="${shop.description}">

                </p>

            </div>

            <!-- add to cart, wishlist, compare -->
            <div class="item-bottom clearfix">
                <a rel="nofollow" data-th-attr="onclick='addToCart(\''+${shop.pid}+'\')'" href="#"
                   class="button product_type_simple add_to_cart_button ajax_add_to_cart" th:text="#{addtocart}">Add to
                    cart</a>

                <a href="javascript:void(0)" class="compare button" rel="nofollow" title="Add to Compare">Compare</a>

                <div class="yith-wcwl-add-to-wishlist add-to-wishlist-248">
                    <div class="yith-wcwl-add-button show" style="display:block">
                        <a data-th-attr="onclick='addToWish(\''+${shop.pid}+'\')'" rel="nofollow"
                           class="add_to_wishlist">Add to Wishlist</a>
                        <img th:src="@{images/wpspin_light.gif}" class="ajax-loading" alt="loading" width="16"
                             height="16" style="visibility:hidden"/>
                    </div>

                    <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">
                        <span class="feedback">Product added!</span>
                        <a href="#" rel="nofollow">Browse Wishlist</a>
                    </div>

                    <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
                        <span class="feedback">The product is already in the wishlist!</span>
                        <a href="#" rel="nofollow">Browse Wishlist</a>
                    </div>

                    <div style="clear:both"></div>
                    <div class="yith-wcwl-wishlistaddresponse"></div>
                </div>

                <div class="clear"></div>
                <a href="#" data-fancybox-type="ajax" class="sm_quickview_handler-list fancybox fancybox.ajax">Quick
                    View </a>
            </div>
        </div>
    </div>
</div>

<div id="li">
    <div class="item-img">
        <a href=th:href="@{/simpleproduct/}+${hotp.pid}" title="corned beef enim">
            <img width="180" height="180" th:src="${hotp.pimage}"
                 class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt=""
                 sizes="(max-width: 180px) 100vw, 180px">
        </a>
    </div>

    <div class="item-content">
        <div class="reviews-content">
            <div class="star">
                <span th:style="'width:'+${hotp.star}+'px'"></span>
            </div>
            <div class="item-number-rating">
                [[${hotp.reviews}]] Review(s)
            </div>
        </div>

        <h4><a th:href="@{/simpleproduct/}+${hotp.pid}" th:title="${hotp.pname}"><span th:text="${hotp.pname}"></span>
        </a></h4>

        <div class="item-price">
            <del th:if="${hotp.deals!=0}" th:text="'￥'+${hotp.marketPrice}">
            </del>

            <ins th:text="'￥'+${hotp.shopPrice}">
            </ins>
        </div>
    </div>
</div>

</body>
</html>